<template>
    <div class="hello">
        <x-header >更新用户信息</x-header>
        <div style="position: absolute;width: 100%;">
            <group title="编辑">
                <x-input v-model="height" title="身高CM" :max="3" placeholder="请输入体重" ></x-input>
                <x-input v-model="weight" title="体重KG" :max="3" placeholder="请输入身高" ></x-input>
                <x-input v-model="age" title="年龄" :max="3" placeholder="请输入年龄" ></x-input>
                <x-input v-model="sex" title="性别" :max="1" placeholder="请输入性别0/1" ></x-input>
                <x-input v-model="nickname" title="昵称" :max="12" placeholder="请输入体重 KG" ></x-input>
            </group>

            <div style="position: fixed; top: auto; bottom: 40px; left: 10%;right: 10%">
                <x-button type="primary" @click.native="processButton001">提交</x-button>
            </div>

        </div>
    </div>
</template>

<script>
    import {Group, Cell, Tabbar, TabbarItem, Swiper, SwiperItem} from '_vux@2.9.3@vux'
    import {http} from '@/hos/http'

    export default {
        components: {
            Group,
            Cell,
            Tabbar,
            TabbarItem,
            Swiper,
            SwiperItem
        },
        name: 'UpdateUserInfo',
        computed: {
            unionid: {
                get () {
                    return this.$store.state.unionid
                },
                set (value) {
                    this.$store.commit('setUnionid', value)
                }
            }
        },
        data () {
            return {
                height: 0, // 身高 CM
                weight: 0, // 体重 KG
                age: 0, // 年龄
                sex: 0, // 性别 1/0
                nickname: '华仔'
            }
        },
        methods: {
            processButton001 () {
                if (this.unionid.indexOf('ow-Ad1') !== 0 || this.unionid.length !== 28) {
                    alert('联合id错误')
                    return
                }
                let data = {
                    unionid: this.unionid,
                    height: Number(this.height),
                    weight: Number(this.weight),
                    age: Number(this.age),
                    sex: Number(this.sex),
                    nickname: this.nickname}
                alert(JSON.stringify(data))
                http.get('https://screen.zjlijiujia.com/common/api/updateUserInfo.php', data, {})
                .then((resp) => {
                    alert(JSON.stringify(resp))
                }, (error) => {
                    alert(JSON.stringify(error))
                })
            }
        },
        beforeDestroy () {
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
        font-weight: normal;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>
